<template>
  <div class="userinfoapply">
    <!-- 搜索框 -->
    <el-form :inline="true">
      <el-form-item label="征地项目：">
        <el-select v-model="value" value-key="Id" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.Id"
            :label="
              item.township +
              '--' +
              item.Village +
              '--' +
              item.YearNum +
              '--' +
              item.ProjectName +
              '--' +
              item.CreatFarmer +
              ' / ' +
              item.farmerAccount
            "
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号：">
        <el-input v-model="idcard" />
      </el-form-item>
      <!-- <el-form-item label="名字：">
        <el-input v-model="name" />
      </el-form-item> -->
      <el-form-item label="参保类型：">
        <el-select v-model="insured" placeholder="请选择">
          <el-option
            v-for="item in data"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="state" placeholder="请选择">
          <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="el-icon-search" @click="query()">查询</el-button>
        <el-button class="el-icon-plus" @click="adddialogVisible = true"
          >添加</el-button
        >
        <el-button class="el-icon-close" @click="del">删除</el-button>
        <el-button class="el-icon-s-operation" @click="subm"
          >勾选提交</el-button
        >
        <el-button class="el-icon-s-operation" @click="submAll"
          >全部提交</el-button
        >
        <el-button icon="el-icon-download" @click="exportClick()"
          >导出文档</el-button
        >
        <!-- <el-button class="el-icon-printer" @click="PrintRow">打印</el-button> -->
        <!-- <el-button class="el-icon-printer" @click="printSomething"
          >打印</el-button
        > -->
      </el-form-item>
    </el-form>

    <!-- 查询文件展示列表 -->
    <el-table
      v-show="datainfo"
      ref="multipleTable"
      :data="
        tableList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      :row-key="getRowKey"
      border
      style="width: 2217px"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      height="calc(100vh - 350px)"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ height: '48px' }"
    >
      <!--  -->
      <el-table-column type="selection" width="55" />
      <el-table-column fixed="left" label="操作" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.ReviewResult == 0">
            <el-button type="text" size="small" @click="modify(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="delet(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="mitRef(scope.row)"
              >提交</el-button
            >
          </div>
          <div v-else-if="scope.row.ReviewResult == 2">
            <el-button type="text" size="small" @click="modify(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="delet(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="mitRef(scope.row)"
              >提交</el-button
            >
          </div>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="ReviewResult" label="状态" width="130">
        <template slot-scope="scope">
          <div v-if="scope.row.ReviewResult == 0">编辑</div>
          <div v-else-if="scope.row.ReviewResult == 1">待审核</div>
          <div v-else-if="scope.row.ReviewResult == 2">审核未通过</div>
          <div v-else>审核通过</div>
        </template>
      </el-table-column>
      <el-table-column prop="SocialSecurity" label="参保类型" width="120">
      </el-table-column>
      <el-table-column prop="Name" label="姓名" width="110" />
      <el-table-column prop="Gender" label="性别" width="60" />
      <el-table-column prop="IdentityNum" label="身份证号" width="180" />
      <el-table-column
        prop="LandExpropriatedAge"
        label="被征地时年龄"
        width="130"
      />
      <el-table-column
        prop="BasicSubsidyYears"
        label="基准补贴年限（年）"
        width="130"
        ><template slot-scope="scope">
          {{ yearjs(scope.row.BasicSubsidyYears) }}
        </template></el-table-column
      >
      <!-- <el-table-column prop="SocialSecurityNum" label="社保卡号" width="180" /> -->
      <!-- <el-table-column
        prop="SocialSecurityOriginal"
        label="原有社保类型"
        width="180"
      />
      <el-table-column prop="Payment" label="社保缴费状态" width="180" /> -->
      <el-table-column
        prop="PovertySubsidyYears"
        label="享受困难补贴年限（月）"
        width="110"
      >
        <template slot-scope="scope">
          {{
            scope.row.PovertySubsidyYears == 0
              ? "-"
              : scope.row.PovertySubsidyYears
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="CompanyPaymentYears"
        label="职工养老缴费年限（月）"
        width="110"
      >
        <template slot-scope="scope">
          {{
            scope.row.CompanyPaymentYears == 0
              ? "-"
              : scope.row.CompanyPaymentYears
          }}
        </template></el-table-column
      >
      <el-table-column
        prop="FinalSubsidyYears"
        label="享受补贴年限（年）"
        width="93"
      >
        <template slot-scope="scope">
          {{
            scope.row.FinalSubsidyYears == 0
              ? "-"
              : yearjs(scope.row.FinalSubsidyYears)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="SubsidyMoney"
        label="补贴金额"
        width="150"
        style="text-align: right"
      >
        <template slot-scope="scope">
          {{ number_format(scope.row.SubsidyMoney, 2) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="InterestMoney"
        label="计息金额"
        width="150"
        style="text-align: right"
      >
        <template slot-scope="scope">
          {{ number_format(scope.row.InterestMoney, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="CreateTime" label="创建时间" width="160">
        <template slot-scope="scope">{{
          formatDate(scope.row.CreateTime)
        }}</template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-show="datainfo"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableList.length"
    >
    </el-pagination>
    <!-- 展示数据总和 -->
    <el-form :inline="true" v-show="datainfo">
      <el-form-item label="人数：">
        <el-input v-model="allperson" type="number" disabled />
      </el-form-item>
      <el-form-item label="补贴金额：">
        <el-input
          placeholder=""
          v-model="allmoney"
          :disabled="true"
          style="text-align: right; align: right"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="计息金额：">
        <el-input
          placeholder=""
          v-model="jiximoney"
          :disabled="true"
          style="text-align: right; align: right"
        >
        </el-input>
      </el-form-item>
      <!-- <el-form-item
        ><el-checkbox v-model="allCheck" @change=""
          >全选所有</el-checkbox
        ></el-form-item
      > -->
    </el-form>
    <!-- 修改模态框 -->
    <el-dialog title="修改" :visible.sync="dialogVisible" width="875px">
      <el-form
        :label-position="labelPosition"
        label-width="155px"
        :inline="true"
      >
        <el-form-item
          label="姓名"
          :rules="[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在2 到 5 个字符', trigger: 'blur' },
          ]"
        >
          <!-- <el-input v-model="inputvillage" placeholder="请输入村"></el-input> -->
          <el-input v-model="inputvillage" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="inputlandname"
            value-key="label"
            placeholder="请选择性别"
            @change="handleChange"
          >
            <el-option
              v-for="item in sex"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="身份证号"
          :rules="[
            {
              required: true,
              message: '请输入正确的身份证号',
              trigger: 'blur',
            },
            { min: 18, max: 18, message: '长度为 18 个字符', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="inputyears"
            placeholder="请输入身份证号"
            maxlength="18"
          />
        </el-form-item>
        <el-form-item label="社保卡号">
          <el-input v-model="inputbatch" placeholder="请输入社保卡号" />
        </el-form-item>
        <el-form-item label="开户行名称">
          <el-input v-model="inputmassif" placeholder="请输入开户行名称" />
        </el-form-item>
        <el-form-item label="银行账号">
          <!-- <el-input v-model="inputapprovaldate" placeholder="请输入基准日期"></el-input> -->
          <el-input
            v-model="inputapprovaldate"
            placeholder="请输入银行账号"
            type="number"
          />
        </el-form-item>
        <el-form-item label="原有社保类型">
          <el-select
            v-model="inputinterestdate"
            value-key="label"
            placeholder="请选择原有社保类型"
            @change="handleChange"
          >
            <el-option
              v-for="item in option"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="社保缴费状态">
          <el-select
            v-model="inputyearwages"
            value-key="label"
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in moneyoption"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="享受困难补贴年限">
          <el-input v-model="inputwages" placeholder="" />（月）
        </el-form-item>
        <el-form-item label="企业缴费年限">
          <el-input v-model="inputmeasureland" placeholder="" />（月）
        </el-form-item>
        <el-form-item label="征地项目">
          <el-select
            v-model="inputareaprice"
            value-key="ProjectName"
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in muoption"
              :key="item.Id"
              :value="item.Id"
              :label="item.ProjectName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="被征地时年龄">
          <el-input
            v-model="inputlevytaxes"
            placeholder=""
            type="number"
          />（周岁）
        </el-form-item>
        <el-form-item label="基准补贴年限">
          <el-input
            v-model="inputsocialsecurity"
            placeholder=""
            type="number"
          />
        </el-form-item>
        <el-form-item label="享受补贴年限">
          <el-input v-model="inputhouseholds" placeholder="" type="number" />
        </el-form-item>
        <el-form-item label="补贴金额">
          <el-input v-model="inputpeople" placeholder="" type="number" />
        </el-form-item>
        <el-form-item label="参保类型：">
          <el-select
            v-model="ainsured"
            value-key="label"
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in datatype"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="abeizhu" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog title="新增" :visible.sync="adddialogVisible" width="875px">
      <el-form
        :label-position="labelPosition"
        :inline="true"
        label-width="155px"
      >
        <el-form-item
          label="姓名"
          :rules="[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在2 到 5 个字符', trigger: 'blur' },
          ]"
        >
          <!-- <el-input v-model="inputvillage" placeholder="请输入村"></el-input> -->
          <el-input v-model="addinputvillage" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addinputlandname" placeholder="请选择">
            <el-option
              v-for="item in sex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="身份证号"
          :rules="[
            {
              required: true,
              message: '请输入正确的身份证号',
              trigger: 'blur',
            },
            { min: 18, max: 18, message: '长度为 18 个字符', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="addinputyears"
            placeholder="请输入身份证号"
            maxlength="18"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="社保卡号">
          <el-input v-model="addinputbatch" placeholder="请输入社保卡号" />
        </el-form-item>
        <el-form-item label="开户行名称">
          <el-input v-model="addinputmassif" placeholder="请输入开户行名称" />
        </el-form-item>
        <el-form-item label="银行账号">
          <!-- <el-input v-model="inputapprovaldate" placeholder="请输入基准日期"></el-input> -->
          <el-input
            v-model="addinputapprovaldate"
            placeholder="请输入银行账号"
          />
        </el-form-item>
        <el-form-item label="原有社保类型">
          <el-select v-model="addinputinterestdate" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="社保缴费状态">
          <el-select v-model="addinputyearwages" placeholder="请选择">
            <el-option
              v-for="item in moneyoption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="享受困难补贴年限">
          <el-input v-model="addinputwages" placeholder="" />（月）
        </el-form-item>
        <el-form-item label="企业缴费年限">
          <el-input v-model="addinputmeasureland" placeholder="" />（月）
        </el-form-item>
        <el-form-item label="征地项目">
          <el-select v-model="addinputareaprice" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.Id"
              :label="item.ProjectName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="被征地时年龄">
          <el-input
            v-model="addinputlevytaxes"
            placeholder=""
            type="number"
          />（周岁）
        </el-form-item>
        <el-form-item label="基准补贴年限">
          <el-input
            v-model="addinputsocialsecurity"
            placeholder=""
            type="number"
          />
        </el-form-item>
        <el-form-item label="享受补贴年限">
          <el-input v-model="addinputhouseholds" placeholder="" type="number" />
        </el-form-item>
        <el-form-item label="补贴金额">
          <el-input v-model="addinputpeople" placeholder="" type="number" />
        </el-form-item>
        <el-form-item label="参保类型">
          <el-select v-model="addinsured" placeholder="请选择">
            <el-option
              v-for="item in data"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addbeizhu" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseadd()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 打印模板 -->
    <div ref="printTest" class="app" id="printTest">
      <table style="width: 100%">
        <thead>
          <tr>
            <th style="width: 100%; text-align: center; font-size: 20px">
              被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）
            </th>
          </tr>
          <tr>
            <th style="font-weight: normal">
              <p style="width: 100%; display: flex; padding: 0; margin: 0">
                <span style="display: block; width: 50%; text-align: left"
                  >用地项目名称：</span
                >
                <span style="display: block; width: 50%; text-align: right"
                  >第n页，共n页</span
                >
              </p>
            </th>
          </tr>
        </thead>
      </table>
      <ul
        style="
          margin-top: 10px;
          border: 1px solid;
          list-style: none;
          padding: 0;
        "
      >
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
              font-size: 10px;
            "
            >所属乡（镇、园区）</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
              font-size: 10px;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
              font-size: 10px;
            "
            >所属村</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
              font-size: 10px;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
              font-size: 10px;
            "
            >批准用地日期</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              font-size: 10px;
            "
            >年 月 日</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >年度</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >批次</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >批准用地面积</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
            >亩</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >被征地户数</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
            >户</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >缴费比例</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
            >%</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >区片价</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
          >
            元</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >被征地人数</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
            >人</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >社会保险费</span
          >
          <span
            style="
              display: block;
              width: 51%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
            >元</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid black;
            line-height: 50px;
            display: flex;
            overflow: hidden;
            word-wrap: break-word;
            word-break: normal;
            font-size: 10px;
          "
        >
          <table
            style="
              width: 100%;
              margin: 0;
              padding: 0;
              border-collapse: collapse;
              border-spacing: 0px;
              -webkit-border-horizontal-spacing: 0px;
              -webkit-border-vertical-spacing: 0px;
            "
          >
            <thead style="margin: 0; padding: 0">
              <tr style="margin: 0; padding: 0">
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  序号
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  姓名
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  性别
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  身份证号
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  年龄
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  基准补贴年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  享受困难补贴年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  职工养老缴费年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  实际补贴年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  实际补贴金额
                </th>
              </tr>
            </thead>
            <tbody style="margin: 0; padding: 0">
              <tr
                style="margin: 0; padding: 0"
                v-for="(item, index) in tableList"
                :key="index"
              >
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                >
                  {{ item.serial }}
                </td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                >
                  {{ item.idcard }}
                </td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                >
                  10
                </td>
              </tr>
            </tbody>
          </table>
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            overflow: hidden;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >总计金额</span
          >
          <span
            style="
              display: block;
              width: 80%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
          ></span>
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            overflow: hidden;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >总计金额（大写）</span
          >
          <span
            style="
              display: block;
              width: 80%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
          ></span>
        </li>
        <li
          style="
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 33%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >经办人：</span
          >
          <span
            style="
              display: block;
              width: 33%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >审核人：</span
          >
          <span
            style="
              display: block;
              width: 33%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
            "
            >负责人：</span
          >
        </li>
      </ul>
      <div class="foot" style="display: flex; margin-top: 10px">
        <div style="width: 50%">制表人：</div>
        <div style="width: 50%">制表时间：{{ dateToString(new Date()) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import print from "print-js";
import flatten from "../../utils/flatten";
import yearjs from "../../utils/yearjs";
import {
  API_RCHECK_FARMER,
  API_GETTV,
  API_UPDATE,
  API_INSERT,
  API_DELETE,
  API_TOREVIEW,
  API_TOREVIEW_ALL,
} from "../../api/userinfoapply";
import { API_GET_LAND } from "../../api/table";
export default {
  name: "",
  data() {
    return {
      msg: "人员信息管理",
      // multipleSelectionAll: [], //所有选中的数据包含跨分页数据
      // allCheck: false, // 跨页选中状态
      loading: true,
      xuhao: "",
      idcardhao: "",
      /* 懒加载 */
      count: 20,
      /* 分页 */
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      options: [],
      option: [
        {
          value: "0",
          label: "无",
        },
        {
          value: "1",
          label: "城居保",
        },
        {
          value: "2",
          label: "职保",
        },
      ], // 原有社保类型
      moneyoption: [
        {
          value: "1",
          label: "无",
        },
        {
          value: "2",
          label: "缴费",
        },
        {
          value: "3",
          label: "享受待遇",
        },
      ], // 社保缴费状态
      muoption: [],
      states: [
        {
          value: "0",
          label: "编辑",
        },
        {
          value: "1",
          label: "待审核",
        },
        {
          value: "2",
          label: "审核未通过",
        },
        {
          value: "9",
          label: "审核通过",
        },
        {
          value: "-1",
          label: "全选",
        },
      ],
      data: [
        {
          value: "1",
          label: "城居保",
        },
        {
          value: "2",
          label: "职保",
        },
        {
          value: "0",
          label: "其他",
        },
        {
          value: "-1",
          label: "全选",
        },
      ],
      datatype: [
        {
          value: "1",
          label: "城居保",
        },
        {
          value: "2",
          label: "职保",
        },
        {
          value: "0",
          label: "其他",
        },
      ],
      tableList: [],
      multipleSelection: [], // 勾选中的数据集合
      value: "", // 征地项目
      insured: "-1", // 参保类型
      idcard: "", // 身份证号
      name: "", // 名字
      type: "", // 参保类型
      state: "-1", // 审核状态
      allmoney: "", // 补贴金额
      jiximoney: "",
      allperson: "", // 人数
      datainfo: false,
      currentPage4: 1,
      dialogVisible: false, // 修改模块显示隐藏
      adddialogVisible: false, // 新增模块显示隐藏
      labelPosition: "right",
      /* 修改每一项输入框 */
      inputvillage: "",
      inputlandname: "",
      inputyears: "",
      inputbatch: "",
      inputmassif: "",
      inputapprovaldate: "",
      inputinterestdate: "",
      inputyearwages: "",
      inputwages: "",
      inputmeasureland: "",
      inputareaprice: "",
      inputlevytaxes: "",
      inputsocialsecurity: "",
      inputhouseholds: "",
      inputpeople: "",
      ainsured: "",
      abeizhu: "",
      userId: "",
      /* 修改--下拉框内数据不选时默认传的Id */
      sexId: "", // 性别Id
      ysecurity: "", // 原有社保类型
      secuId: "", // 社保缴费状态
      landnameId: "", // 征地项目
      securityId: "", // 参保类型
      /* 新增模态框 */
      addinputvillage: "",
      addinputlandname: "",
      addinputyears: "",
      addinputbatch: "",
      addinputmassif: "",
      addinputapprovaldate: "",
      addinputinterestdate: "",
      addinputyearwages: "",
      addinputwages: "",
      addinputmeasureland: "",
      addinputareaprice: "",
      addinputlevytaxes: "",
      addinputsocialsecurity: "",
      addinputhouseholds: "",
      addinputpeople: "",
      addinsured: "",
      addbeizhu: "",
      // 性别列表
      sex: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
    };
  },
  methods: {
    load() {
      this.count += 10;
    },
    yearjs(num) {
      if ((num % 12 != 0) & (num > 12)) {
        return parseInt(num / 12) + "年" + (num % 12) + "月";
      } else if (num < 12) {
        return num + "月";
      } else {
        return parseInt(num / 12);
      }
    },
    // 补贴金额处理（金额格式化）
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    // 日期格式化
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    getRowKey(row) {
      return row.id;
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    /* 是否修改 */
    handleClose() {
      this.$confirm("确认修改？")
        .then((_) => {
          // done();
          if (this.inputlandname == "男") {
            this.inputlandname = 1;
          } else if (this.inputlandname == "女") {
            this.inputlandname = 2;
          }
          let data = {
            Id: this.userId,
            Name: this.inputvillage,
            GenderCode: isNaN(this.inputlandname)
              ? this.sexId
              : this.inputlandname,
            IdentityNum: this.inputyears,
            SocialSecurityNum: this.inputbatch,
            BankName: this.inputmassif,
            BankAccount: this.inputapprovaldate,
            SocialSecurityTypeOriginal: isNaN(this.inputinterestdate)
              ? this.ysecurity
              : this.inputinterestdate,
            PaymentStatus: isNaN(this.inputyearwages)
              ? this.secuId
              : this.inputyearwages,
            PovertySubsidyYears: this.inputwages,
            CompanyPaymentYears: this.inputmeasureland,
            LandId: isNaN(this.inputareaprice)
              ? this.inputareaprice
              : this.landnameId,
            LandExpropriatedAge: this.inputlevytaxes,
            BasicSubsidyYears: this.inputsocialsecurity,
            FinalSubsidyYears: this.inputhouseholds,
            SubsidyMoney: this.inputpeople,
            SocialSecurityType: isNaN(this.ainsured)
              ? this.securityId
              : this.ainsured,
            Note: this.beizhu,
          };
          API_UPDATE(data)
            .then((res) => {
              console.log(res);
              this.$message.success("修改成功！");
              this.refresh();
            })
            .catch((err) => {
              console.log(err);
            });
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    /* 是否添加 */
    handleCloseadd() {
      this.$confirm("确认增加？")
        .then((_) => {
          let data = {
            Id: 0,
            Name: this.addinputvillage,
            GenderCode: this.addinputlandname,
            IdentityNum: this.addinputyears,
            SocialSecurityNum: this.addinputbatch,
            BankName: this.addinputmassif,
            BankAccount: this.addinputapprovaldate,
            SocialSecurityTypeOriginal: this.addinputinterestdate,
            PaymentStatus: this.addinputyearwages,
            PovertySubsidyYears: this.addinputwages,
            CompanyPaymentYears: this.addinputmeasureland,
            LandId: this.addinputareaprice,
            LandExpropriatedAge: this.addinputlevytaxes,
            BasicSubsidyYears: this.addinputsocialsecurity,
            FinalSubsidyYears: this.addinputhouseholds,
            SubsidyMoney: this.addinputpeople,
            SocialSecurityType: this.addinsured,
            Note: this.addbeizhu,
          };
          API_INSERT(data)
            .then((res) => {
              console.log(res);
              this.$message.success("添加成功！");
              this.addinputvillage = "";
              this.addinputlandname = "";
              this.addinputyears = "";
              this.addinputbatch = "";
              this.addinputmassif = "";
              this.addinputapprovaldate = "";
              this.addinputinterestdate = "";
              this.addinputyearwages = "";
              this.addinputwages = "";
              this.addinputmeasureland = "";
              this.addinputareaprice = "";
              this.addinputlevytaxes = "";
              this.addinputsocialsecurity = "";
              this.addinputhouseholds = "";
              this.addinputpeople = "";
              this.addinsured = "";
              this.addbeizhu = "";
              this.refresh();
            })
            .catch((err) => {
              console.log(err);
            });
          this.adddialogVisible = false;
        })
        .catch((_) => {});
    },
    // 选择乡镇的级联选择器
    handleChange(value) {
      console.log(value);
    },
    /* 时间格式化 */
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    /* 导出文档 */
    exportClick() {
      this.export2Excel();
    },
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");

        const tHeader = [
          "参保类型",
          "姓名",
          "性别",
          "身份证号",
          "被征地时年龄",
          "基准补贴年限",
          "享受困难补贴年限（月）",
          "职工养老缴费年限（月）",
          "享受补贴年限（年）",
          "补贴金额(元)",
          "创建时间",
        ];

        const filterVal = [
          "SocialSecurity",
          "Name",
          "Gender",
          "IdentityNum",
          "LandExpropriatedAge",
          "BasicSubsidyYears",
          "PovertySubsidyYears",
          "CompanyPaymentYears",
          "FinalSubsidyYears",
          "SubsidyMoney",
          "CreateTime",
        ];
        console.log(filterVal);
        // filterVal[CreateTime] = this.formatDate(filterVal.CreateTime);

        const list = this.tableList.map((item) => {
          return {
            SocialSecurity: item.SocialSecurity,
            Name: item.Name,
            Gender: item.Gender,
            IdentityNum: item.IdentityNum,
            LandExpropriatedAge: item.LandExpropriatedAge,
            BasicSubsidyYears: this.yearjs(item.BasicSubsidyYears),
            PovertySubsidyYears: item.PovertySubsidyYears,
            CompanyPaymentYears: item.CompanyPaymentYears,
            FinalSubsidyYears: this.yearjs(item.FinalSubsidyYears),
            SubsidyMoney: item.SubsidyMoney,
            CreateTime: this.formatDate(item.CreateTime),
          };
        });
        console.log(list);
        const data = this.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "人员信息");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 打印
    // PrintRow(index, row) {
    //   /* 打印信息 */
    //   let printJS = {
    //     printable: "printTest", // 这里是要打印元素的ID
    //     header: "被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）",
    //     documentTitle:
    //       "被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）",
    //   };
    //   this.$print(this.$refs.printTest); // 使用
    // },
    printSomething() {
      // 此处的style即为打印时的样式
      print({
        printable: "printTest",
        type: "html",
        scanStyles: false,
        // header: "被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）",
        documentTitle:
          "被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）",
        // headerStyle: "font-size:20px; text-align:center;",
        repeatTableHeader: false,
      });
      /* let printTest = `<div ref="printTest" class="app" id="printTest">
      <p style="width: 100%; display: flex; padding: 0; margin: 0">
        <span style="display: block; width: 50%; text-align: left"
          >用地项目名称：</span
        >
        <span style="display: block; width: 50%; text-align: right"
          >第n页，共n页</span
        >
      </p>
      <ul
        style="
          margin-top: 10px;
          border: 1px solid;
          list-style: none;
          padding: 0;
        "
      >
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
              font-size: 10px;
            "
            >所属乡（镇、园区）</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
              font-size: 10px;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
              font-size: 10px;
            "
            >所属村</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
              font-size: 10px;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
              font-size: 10px;
            "
            >批准用地日期</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              font-size: 10px;
            "
            >年 月 日</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >年度</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >批次</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
          ></span>
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >批准用地面积</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
            >亩</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >被征地户数</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
            >户</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >缴费比例</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
            >%</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >区片价</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
          >
            元</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >被征地人数</span
          >
          <span
            style="
              display: block;
              width: 12%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
              border-right: 1px solid;
            "
            >人</span
          >
          <span
            style="
              display: block;
              width: 17%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >社会保险费</span
          >
          <span
            style="
              display: block;
              width: 51%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
            >元</span
          >
        </li>
        <li
          style="
            border-bottom: 1px solid black;
            line-height: 50px;
            display: flex;
            overflow: hidden;
            word-wrap: break-word;
            word-break: normal;
            font-size: 10px;
          "
        >
          <table
            style="
              width: 100%;
              margin: 0;
              padding: 0;
              border-collapse: collapse;
              border-spacing: 0px;
              -webkit-border-horizontal-spacing: 0px;
              -webkit-border-vertical-spacing: 0px;
            "
          >
            <thead style="margin: 0; padding: 0; font-size: 10px; line-height: 50px;">
              <tr style="margin: 0; padding: 0">
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  序号
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  姓名
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  性别
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  身份证号
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  年龄
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  基准补贴年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  享受困难补贴年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  职工养老缴费年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  实际补贴年限
                </th>
                <th
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid;
                  "
                >
                  实际补贴金额
                </th>
              </tr>
            </thead>
            <tbody style="margin: 0; padding: 0">
              ${this.tableList
                .map((item) => {
                  return `<tr
                style="margin: 0; padding: 0"
              ><td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                >${item.serial}</td><td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                >
                  ${item.idcard}
                </td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    box-sizing: border-box;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                ></td>
                <td
                  style="
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    border: 1px solid;
                    line-height: 50px;
                  "
                >
                  10
                </td>
              </tr>`;
                })
                .join("")}
            </tbody>
          </table>
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            overflow: hidden;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >总计金额</span
          >
          <span
            style="
              display: block;
              width: 80%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
          ></span>
        </li>
        <li
          style="
            border-bottom: 1px solid;
            height: 50px;
            line-height: 50px;
            display: flex;
            overflow: hidden;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 20%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >总计金额（大写）</span
          >
          <span
            style="
              display: block;
              width: 80%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: right;
            "
          ></span>
        </li>
        <li
          style="
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 10px;
          "
        >
          <span
            style="
              display: block;
              width: 33%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >经办人：</span
          >
          <span
            style="
              display: block;
              width: 33%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
              border-right: 1px solid;
            "
            >审核人：</span
          >
          <span
            style="
              display: block;
              width: 33%;
              box-sizing: border-box;
              padding: 0 10px;
              text-align: left;
            "
            >负责人：</span
          >
        </li>
      </ul>
      <div class="foot" style="display: flex; margin-top: 10px">
        <div style="width: 50%">制表人：</div>
        <div style="width: 50%">制表时间：${this.dateToString(new Date())}</div>
      </div>
    </div>`;
      let data = {
        name: "被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）",
        data: this.tableList,
        htmlContent: printTest,
        title:"被征地农民参保补贴账户补贴到账申请单（城居保、职保、其他）",
        arr: this.tableList,
      };
      console.log(data);
      console.log(data.htmlContent);
      setTimeout(() => {
        this.$doPrint(data);
      }, 0); */
    },
    query() {
      let data = {
        LandId: this.value, // 项目编号
        // Tid: this.insured, // 社保类型
        // Ind: this.idcard, // 身份证号
        // Status: this.state, // 审核结果
      };
      if (this.value == "") {
        // data.LandId = this.value;
        this.$message.warning("请选择征地项目！");
      } else {
        this.datainfo = true;
        if (this.insured != "" && this.insured != "-1") {
          data.Tid = this.insured;
        }
        if (this.idcard != "") {
          data.Ind = this.idcard;
        }
        if (this.state != "" && this.state != "-1") {
          data.Status = this.state;
        }
        console.log(data);
        API_GETTV(data)
          .then((res) => {
            console.log(res);
            this.$message.success("查询成功！");
            console.log(this.againGroup(res.ResList, 100));
            this.allperson = res.ResList.length;
            let a = 0,
              b = 0;
            res.ResList.map((item, index) => {
              // console.log(Number(item.SubsidyMoney));
              a += Number(res.ResList[index].SubsidyMoney);
              b += Number(res.ResList[index].InterestMoney);
            });
            this.allmoney = this.number_format(a, 2);
            this.jiximoney = this.number_format(b, 2);
            this.tableList = res.ResList;
            // console.log(this.allmoney);
            // let ary = [];
            // ary = this.againGroup(res.ResList, 20);
            // for (let i = 0; i < ary.length; i++) {
            //   console.log(ary[i]);
            //   this.tableList = ary[0]
            //   //  let b= this.tableList.concat(this.againGroup(res.ResList, 50)[i]);
            //   //  console.log(b);
            // }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 刷新数据
    refresh() {
      let data = {
        LandId: this.value, // 项目编号
        // Tid: this.insured, // 社保类型
        // Ind: this.idcard, // 身份证号
        // Status: this.state, // 审核结果
      };
      if (this.value == "") {
        // data.LandId = this.value;
        this.$message.warning("请选择征地项目！");
      } else {
        this.datainfo = true;
        if (this.insured != "" && this.insured != "-1") {
          data.Tid = this.insured;
        }
        if (this.idcard != "") {
          data.Ind = this.idcard;
        }
        if (this.state != "" && this.state != "-1") {
          data.Status = this.state;
        }
        console.log(data);
        API_GETTV(data)
          .then((res) => {
            console.log(res);
            this.$message.success("数据刷新成功！");
            console.log(this.againGroup(res.ResList, 100));
            this.allperson = res.ResList.length;
            let a = 0,
              b = 0;
            res.ResList.map((item, index) => {
              // console.log(Number(item.SubsidyMoney));
              a += Number(res.ResList[index].SubsidyMoney);
              b += Number(res.ResList[index].InterestMoney);
            });
            this.allmoney = this.number_format(a, 2);
            this.jiximoney = this.number_format(a, 2);
            this.tableList = res.ResList;
            // console.log(this.allmoney);
            // let ary = [];
            // ary = this.againGroup(res.ResList, 20);
            // for (let i = 0; i < ary.length; i++) {
            //   console.log(ary[i]);
            //   this.tableList = ary[0]
            //   //  let b= this.tableList.concat(this.againGroup(res.ResList, 50)[i]);
            //   //  console.log(b);
            // }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    /* 获取征地项目列表 */
    submitProjectName() {
      API_GET_LAND()
        .then((res) => {
          this.options = res.ResList;
          console.log(this.options);
          this.muoption = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改
    modify(row) {
      this.submitProjectName();
      this.dialogVisible = true;
      this.inputvillage = row.Name;
      this.inputlandname = row.Gender;
      this.inputyears = row.IdentityNum;
      this.inputbatch = row.SocialSecurityNum;
      this.inputmassif = row.BankName;
      this.inputapprovaldate = row.BankAccount;
      this.inputinterestdate = row.SocialSecurity;
      this.inputyearwages = row.Payment;
      this.inputwages = row.PovertySubsidyYears;
      this.inputmeasureland = row.CompanyPaymentYears;
      this.inputareaprice = row.ProjectName;
      this.inputlevytaxes = row.LandExpropriatedAge;
      this.inputsocialsecurity = row.BasicSubsidyYears;
      this.inputhouseholds = row.FinalSubsidyYears;
      this.inputpeople = row.SubsidyMoney;
      this.ainsured = row.SocialSecurityOriginal;
      this.abeizhu = row.Note;
      // 备用ID
      this.sexId = row.GenderCode;
      this.ysecurity = row.SocialSecurityTypeOriginal;
      this.secuId = row.PaymentStatus;
      this.landnameId = row.LandId;
      this.securityId = row.SocialSecurityType;
      this.userId = row.Id;
    },
    // 删除数据
    del() {
      this.$confirm("确认删除？")
        .then((_) => {
          let data = [];
          this.multipleSelection.map((item) => {
            if (item.ReviewResult == 9 || item.ReviewResult == 1) {
              // data.push({
              //   Id: item.Id,
              // })
            } else {
              data.push({
                Id: item.Id,
              });
            }
            console.log(data);
          });
          console.log(data);
          if (data.length != 0) {
            API_DELETE(data)
              .then((res) => {
                console.log(res);
                this.$message.success("删除成功！");
                this.refresh();
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            console.log(data);
            this.$message.warning("未选中有效数据！");
          }
        })
        .catch((_) => {
          console.log("aaa");
        });
    },
    // 删除单条数据
    delet(row) {
      if (row.ReviewResult == 9 || row.ReviewResult == 1) {
        this.$message.warning("该数据状态特殊，无法删除！");
      } else {
        this.$confirm("确认删除？")
          .then((_) => {
            let data = [
              {
                Id: row.Id,
              },
            ];
            API_DELETE(data)
              .then((res) => {
                console.log(res);
                this.$message.success("删除成功！");
                this.refresh();
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((_) => {
            console.log("aaa");
          });
      }
    },
    // 提交单条数据
    mitRef(row) {
      if (row.ReviewResult == 9) {
        this.$message.warning("该数据审核已通过！");
      } else {
        this.$confirm("确认提交？")
          .then((_) => {
            let data = [
              {
                Id: row.Id,
                IdentityNum: row.IdentityNum,
              },
            ];
            API_TOREVIEW(data)
              .then((res) => {
                console.log(res);
                this.$message.success("提交成功！");
                this.refresh();
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((_) => {
            console.log("aaa");
          });
      }
    },
    subm() {
      this.tableList.forEach((item) => {
        // this.$refs.multipleTable.toggleRowSelection(item);
      });
      this.$confirm("确认提交？")
        .then((_) => {
          let data = [];
          this.multipleSelection.map((item) => {
            // console.log(item.ReviewResult);
            if (item.ReviewResult != "9" && item.ReviewResult != "1") {
              data.push({
                Id: item.Id,
                IdentityNum: item.IdentityNum,
              });
            }
          });
          console.log(data);
          // data.map((item) => {
          //   console.log(JSON.stringify(item,index));
          //   if (JSON.stringify(item) == "undefined") {
          //     data.slice(index,1);
          //   }
          // });
          // console.log(this.againGroup(data,8).length);
          // console.log(ary[1]);
          if (data.length != 0) {
            let ary = this.againGroup(data, 200);
            for (let i = 0; i < ary.length; i++) {
              API_TOREVIEW(ary[i])
                .then((res) => {
                  this.$message.success("提交成功");
                  this.refresh();
                  this.multipleSelection.length = 0;
                })
                .catch((err) => {
                  console.log(err);
                });
            }
            // this.tableList.forEach((item) => {
            //   this.$refs.multipleTable.toggleRowSelection(item);
            // });
          } else {
            this.$message.warning("未勾选有效数据！");
          }
        })
        .catch((_) => {
          this.tableList.forEach((item) => {
            // this.$refs.multipleTable.toggleRowSelection(item);
          });
        });
    },
    submAll() {
      if (this.value != "") {
        this.$confirm("确认提交？")
          .then((_) => {
            let data = { Landid: this.value };
            API_TOREVIEW_ALL(data)
              .then((res) => {
                console.log(res);
                this.$message.success("提交成功！");
                this.refresh();
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((_) => {
            this.tableList.forEach((item) => {
              // this.$refs.multipleTable.toggleRowSelection(item);
            });
          });
      } else {
        this.$message.error("未识别到征地项目");
      }
    },
    againGroup(data, num) {
      var result = [];
      for (var i = 0, len = data.length; i < len; i += num) {
        result.push(data.slice(i, i + num));
      }
      return result;
    },
  },
  created() {
    this.submitProjectName();
  },
};
</script>
<style scoped lang="scss">
.userinfoapply {
  box-sizing: border-box;
  padding: 30px;

  .el-table {
    margin-top: 20px;
  }
  .el-pagination {
    margin-top: 10px;
    max-width: 2217px;
    text-align: right;
  }

  // .expanded

  /* 打印的东西隐藏起来 */
  @media only screen {
    #printTest {
      display: none;
    }
  }
  ::v-deep .el-dialog {
    .el-form-item {
      // width: 381px;
    }
    .el-input__inner {
      width: 185px !important;
    }
    .el-input {
      width: 185px !important;
    }
  }
  // .el-table {
  //   margin-bottom: 20px;
  //   height: calc(100vh - 345px);
  // }
  ::v-deep .el-table__body {
    .el-table_1_column_14 {
      text-align: right !important;
    }
  }
  ::v-deep .el-form-item {
    // .el-input {
    //   text-align: right !important;
    // }
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    text-align: right;
  }
    .el-table__header tr,
  .el-table__header th {
    padding: 0 !important;
    height: 45px !important;
    line-height: 45px !important;
  }
}
</style>